<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-22 13:40:14
 * @LastEditors: 47
 * @LastEditTime: 2023-02-18 15:23:37
-->
<template>

  <div class="course-discussion">
    
    <!-- 课程名 -->
    <van-nav-bar
      class="nav-bar"
      :title="courseTitle"
      right-text="客服"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <span class="iconfont icon-row"></span>
      </template>
    </van-nav-bar>

    <!-- 搜索框 -->
    <van-search v-model="value" shape="round" placeholder="搜索" />

    <!-- 分类栏 -->
    <!-- <van-tabs v-model:active="active" >
      <van-tab title="形式与政策讨论区">内容 1</van-tab>
    </van-tabs> -->

    <!-- 讨论标题 -->
    <div class="discussion-title">{{ discussObj.my_course_name }}</div>

    <!-- 讨论楼层 -->
    <div class="discussion-floor">

      <div class="card"  v-for="disc in discussList" :key="disc.discuss_id">

        <!-- 讨论人头像、姓名、时间 -->
        <div class="card-person">

          <!-- 头像 -->
          <img src="@/../public/images/headphoto.jpg" alt="" class="head" @click="goPeopleHome">

          <!-- 姓名、时间 -->
          <div class="name-time">
            <span class="name">{{ disc.discuss_author }}</span>
            <span class="time">{{ disc.discuss_time }}</span>
          </div>

        </div>

        <!-- 问题 -->
        <div class="card-question">
          {{ disc.discuss_content }}
        </div>

        <!-- 第一个回答问题的人 -->
        <div class="first-answer">
          <span class="name">柴新宇：</span>
          <span class="content">与25年前相比，今日香港发生了哪些变化与25年前相比，今日香港发生了哪些变化与25年前相比，今日香港发生了哪些变化与25年前相比，今日香港发生了哪些变化</span>
        </div>

        <!-- 转发、回复、点赞 -->
        <div class="card-task">

          <!-- 转发 -->
          <div class="transmit">
            <span class="iconfont icon-zhuanfa icon"></span>
            <span class="font" @click="showShare = true">转发</span>
          </div>

          <!-- 评论 -->
          <div class="transmit"  @click="goDiscussionReply(disc.discuss_id)">
            <span class="iconfont icon-xiaoxi2 icon"></span>
            <span class="font">评论</span>
          </div>

          <!-- 点赞 -->
          <div class="transmit">
            <span class="iconfont icon-dianzan" :class="{'checked-icon':disc.like_status == 1,icon:disc.like_status == 0}" @click="updateLike(disc.discuss_id,disc.like_status)"></span>
            <span class="font">{{ disc.discuss_like_count }}</span>
          </div>
        </div>

      </div>
      
      <!-- 分享面板 -->
      <van-share-sheet
        v-model:show="showShare"
        title="立即分享给好友"
        :options="options"
        @select="onSelect"
      />

    </div>

    <!-- 底部 -->

    <div class="discussion-bottom">
      已经到底了
    </div>
  </div>


</template>

<script setup>
import { ref,onMounted, computed,inject} from 'vue';
// 引入vant
import { NavBar, showToast, Search,Tab, Tabs, ShareSheet } from 'vant';
// 引入路由
import {useRouter,useRoute} from 'vue-router'

// 导入 course 仓库
import {useCourseStore} from '@/stores/course'
import { storeToRefs } from 'pinia';


const reload = inject('reload')

// 实例化仓库对象
const course = useCourseStore()

// 解构 数据
const {courseId,discussList,courseTitle} = storeToRefs(course)

// 包含讨论标题的对象
const discussObj = computed(() => {
  return discussList.value[0] || {}
})

// 解构 方法
const {getCourseDiscussList,toLike} = course

// 组件挂载完毕后渲染
onMounted(async() => {
  try {
    // 获取课程的讨论列表
    await getCourseDiscussList(courseId.value,1)
  } catch (error) {
    alert(error.message)
  }
})

// 创建路由对象
const router = useRouter()
const route = useRoute()

// 搜索框
const value = ref('')

// likeNum 点赞数量  likeId 讨论id  likeStatus 点赞状态
const updateLike = async (discussId,likeStatus) => {
    await toLike({
        id:discussId,
        userId:1,
        likeStatus,
        judgeCode:2
    })
    reload()
}
// const showLike = (likeNum,likeId,likeStatus) => {
//   // 判断点击的哪个讨论
//   if(discussList.value[likeId].discuss_id - 1 == likeId){

//     // 如果==0 ，让点赞的数量+1 ，并且改变status的值为1
//     if(likeStatus == 0){
//       discussList.value[likeId].discuss_like_count = likeNum+1
//       discussList.value[likeId].like_status = 1
//     }
    
//     // // 如果==1 ，让点赞的数量-1 ，并且改变status的值为0
//     else{
//       discussList.value[likeId].discuss_like_count = likeNum-1
//       discussList.value[likeId].like_status = 0
//     }
//   }
// }

// 分类栏
const active = ref(0);

// 分享面板展示隐藏
const showShare = ref(false);

// 点击左侧箭头返回上一页
const onClickLeft = () => {
  router.push('/courseinfo/coursetask')
}

// 点击➕弹出
const onClickRight = () => {};

// options 属性来定义分享选项
const options = [
  { name: '微信', icon: 'wechat' },
  { name: '朋友圈', icon: 'wechat-moments' },
  { name: '微博', icon: 'weibo' },
  { name: 'QQ', icon: 'qq' },
];

// 点击分享选项时触发
const onSelect = (option) => {
  showShare.value = false;
};

// 跳转到课程讨论回复页面并且传递 discussId 
const goDiscussionReply = (discussId) => {
  router.push({
    name:'discussionreply',
    params:{
      discussId
    }
  })
}

// 跳转到PeopleHome页面
const goPeopleHome = () => {
  router.push('/peoplehome')
}
</script>

<style lang="less" scoped>
.course-discussion {
  overflow: hidden;
  // background-color: #f4f5f7;

  :deep(.van-tabs__line){
    // left: -157px;
    width: 20px;
  }
  :deep(.van-icon) {
      color: black;
  }
  :deep(.van-nav-bar) {
    width: 100%;
    position: fixed;
    
    

    // .van-nav-bar__title {
    //   font-family: "楷体";
    //   font-weight: 600;
    // }
    
    .van-nav-bar__text{
      font-size: 13px;
      font-weight: 500;
      color: rgb(79, 185, 253) ;
    }
  }

  .van-search {
    margin-top: 46px;
    background-color: #ffffff;

    .van-search__content {
    background-color: #f5f6f8;
    }
    
  }

  .van-tab{
    background-color: #f4f5f7;
  }

  .discussion-title{
    font-size: 13px;
    padding: 10px 10px;
    color: #8c8c8c;
    border-bottom: 1px solid #f4f5f7;
  }

  .discussion-floor{
    background-color: #f6f6f6;
    :deep(.van-icon) {
      color:#ffffff;
    } 
    :deep(.van-share-sheet__options){
      justify-content: space-around;
    }

    .card{
      width: 100%;
      margin-bottom: 10px;
      background-color: #ffffff;
      
      .card-person{
        display: flex;
        flex-flow: row;
        padding: 15px 10px;
        // background-color: pink;

        .head{
          width: 40px;
        }

        .name-time{
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          margin-left: 10px;

          .name{
            font-size: 13px;
            color: #4ea1d5;
          }

          .time{
            font-size: 12px;
            color: #b5b5b7;

          }
        }
      }

      .card-question{
        padding: 0 10px;
        font-size: 14px;
        // background-color: aqua;

      }

      .first-answer{
        display: flex;
        flex-flow: row;
        padding: 30px 10px 15px;
        // background-color: bisque;

        .name{
          white-space: nowrap;
          color: #4ea1d5;
          font-size: 12px;
        }

        .content{
          width: 310px;
          color: #c5c4c7;
          font-size: 12px;
          /* 1.这个单词意思是文字显示不开必须强制一行显示 */
          white-space: nowrap;
          /* white-space: nowrap; */
          /* 2.溢出部分隐藏 */
          overflow: hidden;
          /* 3.文字溢出的时候用省略号显示 */
          text-overflow: ellipsis;
        }
      }

      .card-task{
        display:flex;
        flex-flow: row;
        justify-content: space-around;
        padding: 15px 0;

        .transmit{
          display: flex;
          flex-flow: row;
          align-items: center;
          width: 100%;
          // background-color: #4ea1d5;

          .icon{
            margin-left: 38px;
            font-size: 20px;
            color: #858585;
          }

          .checked-icon{
            margin-left: 38px;
            font-size: 20px;
            color: #039dff;
          }
          .font{
            margin-left: 10px;
            color: #858585;
          }
        }
      }
    }
  }

  .discussion-bottom{
    padding: 15px 155px;
    background-color: #f6f6f6;
    font-size: 13px;
    color: #c2c3c5;
  }
}

</style>

